<template>
    <div class="articleList">
       <el-table :data="article">
        <el-table-column prop="title" label="标题" width="140">
        </el-table-column>
        <el-table-column prop="body" label="内容" width="220">
        </el-table-column>
         <el-table-column width="100">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row._id)" type="text" size="small">编辑</el-button>
        <el-button @click="remove(scope.row._id)" type="text"  size="small">删除</el-button>
      </template>
    </el-table-column>
      </el-table>
    </div>
</template>

<script>
export default {
    data() {
      return {
        article:[]
      }
    },
    methods: {
      fetchArticle () {
        this.$http.get('articles').then(res => {
             this.article = res.data
        })
      },
      edit (id) {
           this.$router.push(`/articles/${id}/edit`)
      },
      remove (id) {
        this.$http.delete(`articles/${id}`).then(res => {
          this.$message({
          message: '删除成功',
          type: 'success'
        });
         this.fetchArticle()
        })
      }
    },
    created () {
      this.fetchArticle()
    }
}
</script>

<style>

</style>


